<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script th:src="@{/common/js/jquery-2.1.4.js}" type="text/javascript"></script>
    <script th:src="@{/common/layui/layui.js}" type="text/javascript"></script>
    <script th:src="@{/common/layui/layui.all.js}" type="text/javascript"></script>
    <script th:src="@{/common/js/userServer.js}" type="text/javascript"></script>
    <link rel="stylesheet" th:href="@{/common/layui/css/layui.css}">
    <base target="main">
    <style>
        .center {
            padding: 0.9vw;
            width: 15vw;
            height: 44vh;
            float: left;
        }

        .img {
            width: 15vw;
            height: 37vh;
        }

        .layui-input {
            width: 60%;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">拍卖商场</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a onclick="myOrder();">订单详情</a></li>
            <li class="layui-nav-item"><a onclick="myShopping();">我的拍品</a></li>
            <li class="layui-nav-item"><a onclick="myAuction()">我的竞拍</a></li>
            <li class="layui-nav-item">
                <span th:if=" ${session.user.type} eq 1">
                    <span onmouseout="message2()">
                        <a>后台管理</a>
                    </span>
                    <dl class="layui-nav-child" id="msg2">
                        <dd><a class="addStype">添加拍品类别</a></dd>
                        <dd><a onclick="openWindow('/user/userAdmin')">用户管理</a></dd>
                        <dd><a onclick="openWindow('/page/toExamineList.do')">审核管理</a></dd>
                        <dd><a onclick="openWindow('/page/allOrder.do')">订单管理</a></dd>
                    </dl>
                </span>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right" style="width: 50vw;">
            <!--根据商品名搜索-->
            <li class="layui-nav-item" style="width: 200px">
                <input type="text" class="layui-input" id="sname" style="width: 100%"
                       placeholder="根据商品名搜索">
            </li>
            <li class="layui-nav-item">
                <a style="font-size: 18px" onclick="searchShopping('search')">搜索</a>
            </li>
            <li class="layui-nav-item" style="margin-left: 150px;">
                <span onmouseout="message()">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    <label th:text="${session.user.uname}" style="font-size: 16px;"></label>
                </span>
                <dl class="layui-nav-child" id="msg">
                    <dd><a onclick="myMsg()">个人资料</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/user/unlogin">注销登录</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="">所有商品类别</a>
                    <dl class="layui-nav-child" id="leftMenu">
                        <!--<dd ><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>-->
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="margin-left: 1.5vw;margin-top: 10px;display: block;" class="cmmodityArea" id="content">

        </div>
        <!--商品类别添加-->

    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script>
    $(function () {
        leftMenu();
    })

    function openWindow(str) {
        window.open(str);
    }

    var msg = document.getElementById("msg");

    function message() {
        msg.style.display = "block";
        setTimeout(function () {
            messageOut();
        }, 4000);
    }

    function messageOut() {
        msg.style.display = "none";
    }

    var msg2 = document.getElementById("msg2");

    function message2() {
        msg2.style.display = "block";
        setTimeout(function () {
            messageOut2();
        }, 4000);
    }

    function messageOut2() {
        msg2.style.display = "none";
    }

    /* $("#reset").click(function () {
         $("#tname").val("")
     });*/
    $("#formDemo").click(function () {
        var params = {};
        params.tname = $("#tname").val();
        Base.requestServer()
    });

    $(".addStype").click(function () {
        layer.open({
            title: '拍品类别添加',
            area: ['40%', '50%'],
            type: 2,
            closeBtn: 2,
            cancel: function (index, layero) {//关闭回调
                window.location.href = Base.serverPath + '/page/logo.do';
            },
            content: Base.serverPath + '/page/addStype.do',
        });
    });

    function openDetail(sid) {
        layer.open({
            type: 2,
            area: ['1000px', '700px'],
            skin: 'layui-layer-rim', //加上边框
            // btn: ['关闭','false'],
            shadeClose: true,
            content: ["/goods/openDetail.do?sid=" + sid, 'no'],
            success: function (layero, index) {
                // var data = "${data}";
                // alert(layero);
            }
        });
    }

    var static_stype = "";

    function searchShopping(type, i) {
        if ("search" != type) {
            static_stype = localStorage.getItem("s" + i);
            $('.menu').removeClass("layui-this");
            $('#' + i).addClass("layui-this");
        }
        var sname = $('#sname').val();
        console.log(static_stype)
        var param = {};
        param['stype'] = JSON.parse(static_stype);
        param['sname'] = sname;
        $.ajax({
            type: "POST",
            contentType: "application/x-www-form-urlencoded; charset=utf-8", // post提交乱码
            url: "/goods/searchGoods.do",
            async: true,
            data: param,
            success: function (data) {
                $("#content").html("");
                var element = "";
                if (data.success) {
                    var sid = "";
                    var sname = "";
                    var price = "";
                    var end = "";
                    var imges = "";
                    var list = data.list;
                    for (var i = 0; i < list.length; i++) {
                        sid = list[i].sid;
                        sname = list[i].sname;
                        price = list[i].price;
                        end = list[i].end;
                        imges = list[i].imges;
                        //只取第一张图片
                        if (imges == undefined) {
                            imges = "/image/noImage.jpg";
                        } else if (imges.indexOf(",") != -1) {
                            imges = "/picture/" + imges.substring(0, imges.indexOf(","));
                        } else {
                            imges = "/picture/" + imges;
                        }
                        element += "<div class='center' onclick=openDetail('" + sid + "')>"
                            + "<img src=" + imges + " class='img' >"
                            + "<div>商品名称：" + sname + "</div>"
                            + "<div>起拍卖价：￥ &#32;" + price + "元</div>"
                            + "<div>结束时间：" + end + "</div>"
                            + "</div>";
                    }
                } else {
                    element += "<div style='margin: auto 0px; text-align: center;margin-top: 20%'><p>没有查询到商品数据</p></div>";
                }
                $("#content").html(element);
            },
            error: function () {
                alert("程序错误，请重试！！！");
            }
        });
    }

    function myMsg() {
        layer.open({
            title: '个人资料',
            area: ['40%', '65%'],
            type: 2,
            closeBtn: 2,
            cancel: function (index, layero) {//关闭回调
                window.location.href = Base.serverPath + '/page/logo.do';
            },
            content: Base.serverPath + '/page/personalData.do',
        });
    }

    function leftMenu() {
        var param = {};
        Base.requestServer("queryMenu", param, function (data) {
            var html = "";
            for (var i = 0; i < data.length; i++) {
                localStorage.setItem("s" + i, JSON.stringify(data[i].tid));
                html += '<dd class="menu" id="' + i + '" onclick="searchShopping('+ i +',' + i + ')"><a>' + data[i].tname + '</a></dd>';
            }
            $('#leftMenu').html(html);
            searchShopping('s', 0);
        })
    }

    function myShopping() {
        window.open(Base.serverPath + '/page/myShopping.do');
    }

    function myAuction() {
        window.open(Base.serverPath + '/goods/openMyAuction.do');
    }

    function myOrder() {
        window.open(Base.serverPath + '/page/myOrder.do');
    }
</script>
</body>
</body>
</html>